<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取本地音视频</title>
  <style>
    * {
      margin: 20px;
      font-size: 0;
      box-sizing: border-box;
    }

    #video {
      width: 640px;
      height: 360px;
      background: deepskyblue;
      display: block;
      border-radius: 2px;
      box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
    }
  </style>
</head>
<body>
<video id="video" autoplay loop muted></video>
<script>
  const $video = document.querySelector("#video");
  // 媒体约束
  const constraints = {
    audio: false,
    video: true
  };

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(mediaStream => {
      $video.srcObject = mediaStream;
      $video.play();
    }).catch(console.error);
</script>
</body>
</html>
